<template>
  <lay-layout class="Personalexample">
    <lay-header>
      <Navigationbar />
    </lay-header>
    <lay-body>
      <div class="Personalmenu">
        <div class="userprofile_div">
          <ul>
            <li :class="{ active: activeMenu === '仓鼠' }" @click="switchMenu('仓鼠')">我的仓鼠</li>
            <li :class="{ active: activeMenu === '购物车' }" @click="switchMenu('购物车')">我的购物车</li>
            <li :class="{ active: activeMenu === '订单' }" @click="switchMenu('订单')">我的订单</li>
            <li :class="{ active: activeMenu === '个人信息' }" @click="switchMenu('个人信息')">个人信息</li>
            <li :class="{ active: activeMenu === '关注店铺' }" @click="switchMenu('关注店铺')">关注的店铺</li>
            <li :class="{ active: activeMenu === '地址' }" @click="switchMenu('地址')">地址</li>
            <li :class="{ active: activeMenu === '历史记录' }" @click="switchMenu('历史记录')">历史记录</li>
            <li :class="{ active: activeMenu === '评论' }" @click="switchMenu('评论')">我的评论</li>
          </ul>
        </div>
      </div>

      <div class="Personal_Information">
        <!-- 控制展示的组件 -->
        <ProductRecommendations v-if="activeMenu === '仓鼠'" />
        <div class="Personal_logistics" v-if="activeMenu === '仓鼠'">
          <Logistics />
        </div>
        <Shopping v-if="activeMenu === '购物车'" />
      </div>
    </lay-body>
  </lay-layout>
</template>

<script>
import { ref } from 'vue';
import './Personal.css'
import Navigationbar from "@/components/homepage/Navigationbar/Navigationbar.vue";
import ProductRecommendations from "@/components/personalcenter/ProductRecommendations/ProductRecommendations.vue";
import Logistics from "@/components/personalcenter/Logistics/Logistics.vue";
import Shopping from "@/components/personalcenter/Shopping/Shopping.vue";

export default {
  components: { Shopping, Logistics, ProductRecommendations, Navigationbar },
  setup() {
    // 当前激活的菜单项
    const activeMenu = ref('仓鼠');

    // 切换菜单
    const switchMenu = (menu) => {
      activeMenu.value = menu;
    }

    return {
      activeMenu,
      switchMenu,
    }
  }
}
</script>
